<!--
 * @description  : 商户位置信息
 * @descriptionDetail: 商户位置信息
 * @copyright    : 浙江烟草
 * @author       : lt
 * @create       : 2022-09-27 09:58:58
-->
<template>
  <view>
    <!-- #ifdef H5-ONLY -->
    <theme-navbar 
      :is-white="false"
      :title="navTitle"
      :custom-back="goBack"
      style="z-index: 99999"
    >
    </theme-navbar>
    <!-- #endif -->
    <view :style="{width: getContainerWidth(), height: getContainerHeight()}" id="container"></view>
    <view class="scrollbar1" id="panel">
      <ul id="myList"></ul>
    </view>
  </view>
</template>

<script>
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import { AMapMixin, } from '@/common/AMapMixin.js';
export default {
  components: {},
  mixins: [MescrollMoreMixin, AMapMixin,],
  data () {
    return {
      custAdd: "",
      itemchecked: false,
      showCustom: '',
      checkedData:[],
    };
  },
  onLoad () {
    this.checkedData = this.getRouteParam();
    console.log(this.checkedData);
  },
  mounted () {

  },
  created(){
    window.handlerGoto = this.handlerGoto;
    window.checkedData = this.checkedData;
  },
  methods: {
    initAmap () {
      let map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923,],
        zoom: 13,
      });
      AMapUI.loadUI(['misc/MarkerList', 'overlay/SimpleMarker','overlay/SimpleInfoWindow',],
        function (MarkerList, SimpleMarker,SimpleInfoWindow,) {
          let markerList = new MarkerList({
            //  关联的map对象
            map: map,
            //  列表的dom容器的id
            listContainer: 'myList',
            //  需要监听的列表节点事件
            listElementEvents: ['click',],
            //  需要监听的marker事件
            markerEvents: ['click',],
            //  需要监听的infoWindow事件
            // infoWindowEvents: ['click', 'mouseover', 'mouseout',],
            //  返回数据项的Id
            getDataId: function (dataItem, index) {
              //  index表示该数据项在数组中的索引位置，从0开始，如果确实没有id，可以返回index代替
              return index;
            },
            //  返回数据项的位置信息，需要是AMap.LngLat实例，或者是经纬度数组，比如[116.789806, 39.904989]
            getPosition: function (dataItem) {
              return [dataItem.longitude,dataItem.latitude,];
            },
            //  返回数据项对应的Marker
            getMarker: function (dataItem, context, recycledMarker) {
              let label = dataItem.id;
           
              return new SimpleMarker({
                containerClassNames: 'my-marker',
                iconStyle: './static/fieldAudit/custom-marker.png',
                // iconLabel: label,
              },);      
            },
            //  返回数据项对应的列表节点
            getListElement: function (dataItem, context, recycledListElement) {
              // 使用模板创建
              let customerName = dataItem.customerName;
              let content = MarkerList.utils.template(
                '<div class="first">' +
                '  <span class="left" >NO.</span>' +
                '  <span class="middle"><%- dataItem.licNo %></span>' +
                "  <span class='right' onclick='handlerGoto(<%- dataItem.longitude %>,<%- dataItem.latitude %>,\"" + customerName + "\")'>" +
                '       <div style="float:left;margin-left:8%;margin-top:4%;"><image src="./static/fieldAudit/to-here.png" width="12px" height="17px"></image></div>' +
                '       <div style="margin-left:30%;">到这去</div>' +
                '  </span>' +
                '</div>' +
                '<div class="second">' +
                '    <h3 class="poi-title">' +
                '        <%- dataItem.customerName %>' +
                '    </h3>' +
                '</div>' +
                '<div class="third">' +
                '<%- dataItem.customerAddresses %>' +
                '</div>' +
                '<div class="fourth">' +
                '   <image src="./static/fieldAudit/customer.png" width="13px" height="14px"></image>' +
                '   <span class="middle"><%- dataItem.principalName %></span>' +
                '   <span class="line"></span>' +
                '   <span class="right"><%- dataItem.telephone %></span>' +
                '</div>' +
                '<div class="line">' + 
                '</div>'
                ,
                {
                  dataItem: dataItem,
                  dataIndex: context.index, 
                });
              if (recycledListElement) {
                //  存在可回收利用的listElement, 直接更新内容返回
                recycledListElement.innerHTML = content;
                return recycledListElement;
              }
              //  返回一段html，MarkerList将利用此html构建一个新的dom节点
              return '<li>' + content + '</li>';
            },
            getInfoWindow: function (dataItem, context, recycledInfoWindow) {
              //  返回一个新的InfoWindow
              return new SimpleInfoWindow({
                offset: new AMap.Pixel(0, -15),
                infoTitle:dataItem.customerName,
                infoBody: dataItem.customerAddresses,
              });
            },
          });
          //  监听选中改变
          markerList.on('selectedChanged', function (event, info) {
            //  console.log(event, info);
            if (info.selected) {
              console.log(info);
              if (info.selected.marker) {
                // 更新为选中样式
                info.selected.marker.setIconStyle('./static/fieldAudit/custom-marker-checked.png');
              }
            }
            if (info.unSelected && info.unSelected.marker) {
              // 更新为默认样式
              info.unSelected.marker.setIconStyle('./static/fieldAudit/custom-marker.png');
            }
          });
          //  构建一个数据项数组，数据项本身没有格式要求，但需要支持下述的getDataId和getPosition
          let data = [{
            id: 'A',
            position: [116.020764, 39.904989,],
            name: 'xx区xx副食店',
            address: 'xx市xx区xx村300号xx小区内会所负二层1号门面',
            pName: '龚xx',
            phone:'13333333333',
          }, {
            id: 'B',
            position: [116.405285, 39.904989,],
            name: 'xx区xx副食店',
            address: 'xx市xx区xx村300号xx小区内会所负二层1号门面',
            pName: '南xx',
            phone:'13333333333',
          }, {
            id: 'C',
            position: [116.789806, 39.904989,],
            name: 'xx区xx副食店',
            address: 'xx市xx区xx村300号xx小区内会所负二层1号门面',
            pName: '李xx',
            phone:'13333333333',
          },];
          //  展示该数据
          markerList.render(checkedData);
        });
    },
    getContainerHeight () {
      return (this.$u.sys().windowHeight - 44 - this.$u.sys().statusBarHeight) + "px";
    },
    getContainerWidth () {
      return this.$u.sys().windowWidth + "px";
    },
    // 到这去
    handlerGoto(longitude,latitude,customerName) {
      console.log('导航',customerName);
      this.$deviceApi.navigateMap(latitude,longitude,customerName);
    },
    loadData (page) {
      console.log("page.size", page.size, "page.num", page.num);
      return new Promise(resolve => {
        // TODO 模拟查询到的数据
        setTimeout(() => {
          let list = [];
          // 设置列表数据
          for (let k = 0; k < 10; k++) {
            list.push({
              name: 'xxxxxxxxxx商店',
              address: 'xx市xx区xx路xx号',
              checked: false,
            });
          }
          resolve({ "data": list, });
        }, 1000);
      });
    },
  },
};
</script>
<style lang="scss" scoped>
// 去除高德地图的logo
/deep/ .amap-logo{ 
  display:none !important; 
}
/deep/ .amap-copyright { 
  display:none !important; 
}
#panel {
  position: fixed;
  background-color: white;
  height: 30%;
  overflow-y: auto;
  bottom: 0%;
  width: 100%;
}
/deep/ .amap-container img {
  width:45px;
  height: 54px;
}
/deep/ #myList .selected{
  background-color: #eee;
}
#myList{
  list-style-type: none;
  padding: 5%;
}
/deep/ #myList .first{
  //height: 25px;
}
/deep/ #myList .first .left{
  width: 10%;
  height: 23px;
  line-height: 23px;
  display: inline-block;
  background: #0487FB;
  opacity: 1;
  border-radius: 5px;
  text-align: center;
  font-weight: 600;
  color: #FFFFFF;
  opacity: 1;
  font-size: 12px;
  
}
/deep/ #myList .first .middle{
  width: 63%;
  display: inline-block;
  height: 24px;
  font-size: 17px;
  font-weight: 600;
  line-height: 24px;
  color: #333333;
  opacity: 1;
  margin-left: 1%;
}
/deep/ #myList .first .right{
  width: 20%;
  display: inline-block;
  height: 29px;
  line-height: 29px;
  background: #FFFFFF;
  border: 1px solid #0487FB;
  opacity: 1;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 400;
  color: #0487FB;
  opacity: 1;
}
/deep/ #myList .second{
  margin-top: 10px;
}
/deep/ #myList .third{
  height: 17px;
  font-size: 12px;
  font-weight: 400;
  color: #A8A8A8;
  opacity: 1;
  margin-top: 8px;
  margin-bottom: 15px;
}
/deep/ #myList .fourth .middle{
  height: 22px;
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  opacity: 1;
  margin-left: 3%;
}
/deep/ #myList .fourth .line{
  height: 22px;
  border-right: solid #d9d9d9 1px;
  margin-left: 3%;
}
/deep/ #myList .fourth .right{
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  color: #027AFF;
  opacity: 1;
  margin-left: 3%;
}
/deep/ #myList .line{
  margin-top: 10px;
  border-top: solid #d9d9d9 1px;
  margin-bottom: 20px;
}
</style>